<!DOCTYPE html>
<html>

<head>
  <title>数字人SDK Demo </title>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="digman-render-root" style="background-color: darkgray;"></div>
  <script src="https://gw.alipayobjects.com/os/lib/react/16.14.0/umd/react.production.min.js"
    crossorigin="anonymous"></script>
  <script src="https://gw.alipayobjects.com/os/lib/react-dom/16.14.0/umd/react-dom.production.min.js"
    crossorigin="anonymous"></script>
  <script src="https://gw.alipayobjects.com/os/lib/babel/standalone/7.18.1/babel.min.js"
    crossorigin="anonymous"></script>
  <!-- SDK -->
  <script
    src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lingjing-client/1.0.0/dist/lingjing-client.min.js"
    crossorigin="anonymous"></script>

  <script type="text/babel">

    // 数字人组件
    const T = () => {
      const player = React.useRef(window.Lingjing.Lingjing);
      const [sceneFile, setSceneFile] = React.useState('');

      const loadDataAndPlay = async (dataId) => {
        const resJson = await fetch(`http://101.34.65.217:19746/api/avatarRequest`, { method: 'POST', body: JSON.stringify({ dataId, dataType: "broadcast" }) })
        const result = await resJson.json()
        const broadcastData = JSON.parse(result.resultData).voiceBroadcastResult
        if (!broadcastData) {
          console.log('接口返回数据无效')
          return
        }
        const broadcastForamtData = window.Lingjing.Tools.storyFormat(broadcastData);
        await player.current?.setData(broadcastForamtData);
        player.current?.play();
        // console.log(player.current?.getAudio())
        const audio = player.current?.getAudio();
        audio.on('play', () => {
          console.log('play:' + Date.now())
        });
        audio.on('stop', (obj) => {
          console.log('stop:' + Date.now())
        });
      }

      addEventListener('message', async e => {
        if(e.data.p != undefined) {
          console.log('数据id：', e.data.p)
          loadDataAndPlay(e.data.p)
        }
      })

      const onSceneReady = () => {
        // loadDataAndPlay("525b323408d54f979f792d8ec25a2374")
        loadDataAndPlay("a6f679ee56564415b23bbbc634d7d123")
      }

      React.useEffect(() => {
        // 初始化数字人场景
        (async () => {
          try {
            const resJson = await fetch(`http://101.34.65.217:19746/api/init`, { method: 'POST', body: JSON.stringify({ avatarId: 6625 }) });
            const result = await resJson.json()
            const digmanScene = JSON.parse(result?.resultData).resourceResult.avatarUrl
            setSceneFile(digmanScene);
          } catch (err) {
            console.log("出错了：", err)
          }
        })()
      }, []);

      return (
        <>
          <div>
            <window.Lingjing.Lingjing
              ref={player}
              width={250}
              height={1000}
              sceneFile={sceneFile}
              onSceneReady={onSceneReady}
              shadow
              control
            />
          </div>
        </>
      );
    };

    (() => {
      ReactDOM.render((
        <div>
          <T />
        </div>
      ), document.querySelector('#digman-render-root'));
    })();

  </script>
</body>

</html>
<style>
  #digman-render-root {
    height: 100vh;
    overflow: hidden;
    background-image: url("home.png");
    background-size: 100% 100%;
  }
</style>